<template>
    <div class='container'>

        <t-tabs placement="left" :default-value="14">
            <t-tab-panel :value="1" label="Chat">
                <SimonChat />
            </t-tab-panel>
            <t-tab-panel :value="2" label="ChatItem">
                <SimonChatItem />
            </t-tab-panel>
            <t-tab-panel :value="3" label="ChatContent">
                <SimonChatContent />
            </t-tab-panel>
            <t-tab-panel :value="4" label="ChatAction">
                <SimonChatAction />
            </t-tab-panel>
            <t-tab-panel :value="5" label="ChatLoading">
                <SimonChatLoading />
            </t-tab-panel>
            <t-tab-panel :value="6" label="ChatSender">
                <SimonChatSender />
            </t-tab-panel>
            <t-tab-panel :value="7" label="ChatSenderPlus">
                <SimonChatSenderPlus />
            </t-tab-panel>
            <t-tab-panel :value="8" label="分隔面板">
                <TSplitter />
            </t-tab-panel>
            <t-tab-panel :value="9" label="悬浮按钮">
                <FloatButton />
            </t-tab-panel>
            <t-tab-panel :value="10" label="悬浮按钮加强">
                <FloatButtonPlus :menu-items="menuItems" layout="top" position="bottom-left" buttonSize="small" />
                <FloatButtonPlus :menu-items="menuItems" layout="left" position="bottom-right" buttonSize="large" />
                <FloatButtonPlus :menu-items="menuItems" layout="bottom" position="top-right" buttonSize="medium" />
                <FloatButtonPlus :menu-items="menuItems" layout="bottom" position="top-left" buttonSize="medium" />
            </t-tab-panel>
            <t-tab-panel :value="11" label="LLMChat">
                <LLMChat />
            </t-tab-panel>
            <t-tab-panel :value="12" label="ChatSSE">
                <ChatSSE />
            </t-tab-panel>
            <t-tab-panel :value="13" label="ChatSSEAPI">
                <ChatSSEAPI />
            </t-tab-panel>
            <t-tab-panel :value="14" label="LLMChatLocal">
                <LLMChatLocal />
            </t-tab-panel>
        </t-tabs>
    </div>
</template>



<script setup lang='ts'>
import { ref } from 'vue';


const demo_event = (e: string) => {
    console.log('demo_event', e)
}
const menuItems = [
    {
        key: 'note',
        label: '新建笔记',
        icon: 'edit',
        onClick: () => demo_event("1"),
    },
    {
        key: 'image',
        label: '上传图片',
        icon: 'image',
        onClick: () => alert('上传图片'),
    },
    {
        key: 'event',
        label: '创建日程',
        icon: 'calendar',
        onClick: () => alert('创建日程'),
    },
];

</script>
<style lang='scss' scoped></style>